<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">

        
        <el-menu
          :default-active="activeIndex"
          class="nav-menu"
          mode="horizontal"
          router
        >
          <el-menu-item index="/">{{ $t('nav.home') }}</el-menu-item>
            <!--<el-sub-menu index="exam">-->
                <!--<template #title>{{ $t('nav.exam') }}</template>-->
                <!--<el-menu-item index="/exam/tokutei">{{ $t('exam.tokutei') }}</el-menu-item>-->
                <!--<el-menu-item index="/exam/jft">{{ $t('exam.jft') }}</el-menu-item>-->
                <!--<el-menu-item index="/exam/jlpt">{{ $t('exam.jlpt') }}</el-menu-item>-->
                <!--<el-menu-item index="/exam/interview">{{ $t('exam.interview') }}</el-menu-item>-->
            <!--</el-sub-menu>-->
          <el-sub-menu index="exam">
            <template #title>{{ $t('nav.exam') }}</template>
            <el-menu-item :index="'/exam/examAll?id='+item.id" v-for="(item,index) in examTypes" :key="index">{{ item.name }}</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/materials">{{ $t('nav.materials') }}</el-menu-item>
          <el-menu-item index="/videos">{{ $t('nav.videos') }}</el-menu-item>
          <el-menu-item index="/jobs">{{ $t('nav.jobs') }}</el-menu-item>
          <el-menu-item index="/about">{{ $t('nav.about') }}</el-menu-item>
          <el-menu-item index="/contact">{{ $t('nav.contact') }}</el-menu-item>
        </el-menu>

        <div class="header-right">
          <!-- 语言切换 -->
          <el-dropdown @command="changeLanguage">
            <el-button type="text">
              {{ currentLanguageText }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="zh">{{ $t('common.chinese') }}</el-dropdown-item>
                <el-dropdown-item command="ja">{{ $t('common.japanese') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- 用户操作 -->
          <template v-if="isLoggedIn">
            <!-- 消息通知 -->
            <!--<el-badge :value="unreadMessages" :hidden="unreadMessages === 0">-->
              <!--<el-button type="text" @click="goToMessages">-->
                <!--<el-icon><Bell /></el-icon>-->
              <!--</el-button>-->
            <!--</el-badge>-->
            
            <!-- 用户菜单 -->
            <el-dropdown @command="handleUserCommand">
              <div class="user-menu">
                <el-avatar :size="32" :src="userInfo.avatar || 'https://via.placeholder.com/32x32/409EFF/ffffff?text=用户'" />
                <span class="username">{{ userInfo.nickName || userInfo.userName }}</span>
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <!--<el-dropdown-item command="dashboard">-->
                    <!--<el-icon><House /></el-icon>-->
                    <!--个人中心-->
                  <!--</el-dropdown-item>-->
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="exams">
                    <el-icon><Document /></el-icon>
                    我的考试
                  </el-dropdown-item>
                  <!--<el-dropdown-item command="progress">-->
                    <!--<el-icon><TrendCharts /></el-icon>-->
                    <!--学习进度-->
                  <!--</el-dropdown-item>-->
                  <!--<el-dropdown-item command="messages">-->
                    <!--<el-icon><Bell /></el-icon>-->
                    <!--消息通知-->
                  <!--</el-dropdown-item>-->
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          
          <template v-else>
            <el-button type="primary" @click="goToLogin">{{ $t('common.login') }}</el-button>
          </template>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main">
      <router-view />
    </el-main>

    <!-- 底部 -->
    <el-footer class="footer">

        <div class="footer-content">
        <div class="footer-section">
          <h4>联系我们</h4>
          <p>地址：江苏省无锡市江阴市长山大道55号A2栋7层</p>
          <p>电话：+86-17016303333</p>
          <p>邮箱：82880268@qq.com</p>
        </div>
        <div class="footer-section">
          <h4>快速链接</h4>
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/materials">免费资料</router-link></li>
            <li><router-link to="/videos">视频课程</router-link></li>
            <li><router-link to="/jobs">工作机会</router-link></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4>关注我们</h4>
          <div class="social-links">
              <img :src=" imageObj?.sevenUrl ? resolveUrl(imageObj?.sevenUrl) :'/src/assets/index/test_print_mondaiyoushi.png'"  class="footer-bg-image" />

              <!--<el-button type="text" icon="facebook">Facebook</el-button>-->
            <!--<el-button type="text" icon="message">微信</el-button>-->
          </div>
        </div>
      </div>
      <!--<div class="footer-bottom">-->
        <!--<p>&copy; 2024 Luyện thi tokutei. All rights reserved.</p>-->
      <!--</div>-->
    </el-footer>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowDown, 
  Bell, 
  House, 
  User, 
  Document, 
  TrendCharts, 
  SwitchButton 
} from '@element-plus/icons-vue'
import {
  examstypeList,getExamstypeDetail,listImages
} from '@/api/system'

const { t, locale } = useI18n()
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 兼容相对地址
const resolveUrl =(url)=> {
  if (!url) return ''
  if (/^https?:\/\//i.test(url)) return url
  return (import.meta.env.VITE_BASE_URL || '') + url
}
const activeIndex = computed(() => route.path)

// 登录状态
const isLoggedIn = computed(() => userStore.isLoggedIn)
const userInfo = computed(() => userStore.user || {})

// 未读消息数量
const unreadMessages = ref(3)
const imageObj = ref({})

const currentLanguageText = computed(() => {
  return locale.value === 'zh' ? t('common.chinese') : t('common.japanese')
})

const changeLanguage = (lang) => {
  locale.value = lang
}

const goToLogin = () => {
  router.push('/login')
}

const goToMessages = () => {
  router.push('/messages')
}

const handleUserCommand = (command) => {
  switch (command) {
//    case 'dashboard':
//      router.push('/dashboard')
//      break
    case 'profile':
      router.push('/profile')
      break
    case 'exams':
      router.push('/exams')
      break
    case 'progress':
      router.push('/learning-progress')
      break
    case 'messages':
      router.push('/messages')
      break
    case 'logout':
      handleLogout()
      break
  }
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/')
  } catch {
    // 用户取消退出
  }
}
const examTypes = ref([])
// 获取考试类型
const fetchLists = async () => {
  try {
    const params = {
      pageNum: 1,
      pageSize: 100,
    }

    const response = await examstypeList(params)
    if (response.code === 200) {
      examTypes.value = response.rows || []
    } else {
    }
  } catch (error) {
    console.error('获取考试类型列表失败:', error)
  } finally {
  }
}
// 获取图片
const fetchImages = async () => {
  try {
    const params = {
      pageNum: 1,
      pageSize: 100,
      status:1,
    }

    const response = await listImages(params)
    if (response.code === 200) {
      if(response.rows.length>0){
        userStore.setImageObj(response.rows[0])
        imageObj.value= response.rows[0]
      }
    }
  } catch (error) {
    console.error('获取图片列表失败:', error)
  } finally {
  }
}
onMounted(() => {
  // 初始化数据
  fetchLists()
  fetchImages()
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo h2 {
  color: #409EFF;
  margin: 0;
}

.nav-menu {
  border: none;
  flex: 1;
  margin: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.user-menu:hover {
  background-color: #f5f7fa;
}

.username {
  font-size: 0.9rem;
  color: #2c3e50;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main {
  margin-top: 60px;
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: calc(100vh - 60px - 300px);
}

.footer {
  background: #2c3e50;
  color: #fff;
  padding: 40px 0 20px;
  margin-top: auto;
  height: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.footer-section h4 {
  margin-bottom: 15px;
  color: #409EFF;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-section ul li a:hover {
  color: #409EFF;
}

.social-links {
  display: flex;
  gap: 10px;
}
.footer-bg-image{
    width: 100px;
    height: 100px;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #34495e;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
  }
  
  .nav-menu {
    margin: 10px 0;
  }
  
  .main {
    margin-top: 120px;
  }
  
  .header-right {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .username {
    display: none;
  }
}
</style> 